/**
 * @Creator: eyes
 * @Date: 2019/12/23
 * 日期范围选择的表单项
 */

import React, {useCallback} from 'react';
import {Form} from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {DatePicker} from 'antd';
import moment from 'moment';
import {popUpContainer} from '../../utils';

const {Item: FormItem} = Form;
const {RangePicker} = DatePicker;

export default props => {
    const {
        getFieldDecorator,
        dateRange = [moment(), moment()],
        onChange,
    } = props;

    const onDateRangeChange = useCallback(dateRange => {
        onChange({
            dateRange,
        });
    }, []);

    return (
        <FormItem
            label="日期"
            labelAlign="right"
        >
            {
                getFieldDecorator('dateRange', {
                    initialValue: dateRange,
                    rules: [
                        {
                            required: false,
                        },
                    ],
                })(
                    <RangePicker
                        allowClear={false}
                        className="user-feature-date-range"
                        format="YYYY-MM-DD"
                        onChange={onDateRangeChange}
                        getCalendarContainer={popUpContainer}
                    />,
                )
            }
        </FormItem>
    );
};
